import { observer } from 'mobx-react'
import styles from './index.module.less'
import React, { useState } from 'react'
import type { IntroduceModalType } from './interface'
import cancel from '@/resource/home/cancel.png'
import { Input } from 'antd-mobile'
import success from '@/resource/home/success.png'
export default observer((props: IntroduceModalType) => {
    const { introduceVisible, introduceOnChange } = props
    const [value, setValue] = useState('')
    const save = () => {
        introduceOnChange()
    }
    return introduceVisible ? (
        <div className={styles.page}>
            <div className={styles.content}>
                <div className={styles.title}>修改自我介绍</div>
                <Input
                    placeholder="完善自我介绍，更好认识"
                    value={value}
                    onChange={val => {
                        setValue(val)
                    }}
                />
                <div className={styles.button}>
                    <img src={cancel} onClick={() => introduceOnChange()} />
                    <img src={success} onClick={save} />
                </div>
            </div>
        </div>
    ) : null
})
